<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-image: url("img/bg.jpg");
            background-size: cover;
            font-family: "微软雅黑", sans-serif;
        }

        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width: 300px;
            height: 300px;
        }

        .login h1 {
            color: #555555;
            text-shadow: 0px 10px 10px #CDC673;
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 20px;
        }

        input {
            padding: 10px;
            width: 100%;
            color: white;
            margin-bottom: 10px;
            background-color: #555555;
            border: 1px solid black;
            border-radius: 5px;
            letter-spacing: 2px;
        }

        form button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #CDC673;
            border: 1px solid black;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body class="login">
<h1>Login</h1>
<form action="#" method="get" id="loginForm">
    <input id="username" type="text" name="username" placeholder="请求输入用户名">
    <span id="usernameMsg" style="color: red;display: none">用户名不符合规则</span>
    <input id="password" type="password" name="password" placeholder="请输入密码">
    <span id="passwordMsg" style="color: red;display: none">密码不符合规则</span>
    <button type="submit" id="login">登录</button>
    <button type="submit">注册</button>
</form>

<script>
    //在此处编写js代码实现功能
    /*用户名输入框失去焦点时，校验输入的用户名是否满足 `6到12位的单词字符` 规则；如果不满足，将输入框下面的 span 标签内容展示出来，如果符合则隐藏掉*/
    let username = document.getElementById("username");
    //自己实现
    username.onblur = usernameRule;

    function usernameRule() {
        let flag = true;//默认字符合法
        let valueStr = (username.value + "").trim();
        console.log("len = " + valueStr.length);
        if (valueStr.length >= 6 && valueStr.length <= 12) {
            // alert("通过了if判断");
            for (let i = 0; i < valueStr.length; i++) {
                // alert("进入了for循环");
                if (valueStr.charAt(i) < 'A' || (valueStr.charAt(i) > 'Z' && valueStr.charAt(i) < 'a') || valueStr.charAt(i) > 'z') {
                    // alert("出现了非字母字符");
                    flag = false;
                    break;
                }
            }
        } else {
            flag = false;
        }
        //判断是否显示span
        if (flag === true) {
            document.getElementById("usernameMsg").style.display = "none";
        } else {
            document.getElementById("usernameMsg").style.display = "block";
        }
        return flag;
    }

    /*//答案实现
     username.onblur = function () {
         //定义正则表达式规则
         let usernameReg = /^\w{6,12}$/;//左右的两个斜杠 / 是正则表达式限制符号
         //获取用户输入的用户名
         let username1 = username.value.trim();
         //校验用户名是否符合正则规则
         let flag = usernameReg.test(username1);
         //判断是否符合规则，如果不符合给出提示
         if (!flag) {
             document.getElementById("usernameMsg").style.display = "block";
         } else {
             document.getElementById("usernameMsg").style.display = "none";
         }
     }*/

    /*密码输入框失去焦点时，校验输入的密码是否满足 `6到12位的纯数字字符` 规则；如果不满足，将输入框下面的 span 标签内容展示出来，如果符合则隐藏掉*/
    let password = document.getElementById("password");
    //自己实现
    password.onblur = passwordRule;

    function passwordRule() {
        let flag = true;//默认字符合法
        let valueStr = (password.value + "").trim();
        console.log("len = " + valueStr.length);
        if (valueStr.length >= 6 && valueStr.length <= 12) {
            // alert("通过了if判断");
            for (let i = 0; i < valueStr.length; i++) {
                // alert("进入了for循环");
                if (valueStr.charAt(i) < '0' || valueStr.charAt(i) > '9') {
                    // alert("出现了非数字字符");
                    flag = false;
                    break;
                }
            }
        } else {
            flag = false;
        }
        //判断是否显示span
        if (flag === true) {
            document.getElementById("passwordMsg").style.display = "none";
        } else {
            document.getElementById("passwordMsg").style.display = "block";
        }
        return flag;
    }

    /*//答案实现
    password.onblur = function () {
        //定义正则表达式规则
        let passwordReg = /^\d{6,12}$/;//左右的两个斜杠 / 是正则表达式限制符号
        //获取用户输入的密码
        let password1 = password.value.trim();
        //校验密码是否符合正则规则
        let flag = passwordReg.test(password1);
        //判断是否符合规则，如果不符合给出提示
        if (!flag) {
            document.getElementById("passwordMsg").style.display = "block";
        } else {
            document.getElementById("passwordMsg").style.display = "none";
        }
    }*/

    /*点击 `登陆` 按钮，校验输入的用户名和密码；如果不满足规则，将用户名输入框和密码输入框下的 span 标签内容展示出来，并阻止表单提交，如果满足则隐藏，允许表单提交*/
    document.getElementById("loginForm").onsubmit = function () {
        return usernameRule() && passwordRule();
        // return true;
    }
</script>
</body>
</html>